<template>
  <div class="questions-choice-container">
    <div class="app-container">
      <!-- 卡片区域 -->
      <el-card>
        <!-- 新增试题按钮 -->
        <el-row>
          <el-button
            class="addBtn"
            type="success"
            icon="el-icon-edit"
            @click="$router.push('/questions/new')"
          >新增试题</el-button>
        </el-row>
        <!-- 表单区域 -->
        <el-form
          ref="fromRef"
          :model="formData"
          :inline="true"
          class="one-form"
          label-position="right"
          label-width="68px"
        >
          <!-- 第一行 -->
          <el-row>
            <!-- 学科选择器 -->
            <el-col :span="6">
              <el-form-item
                label="学科"
                label-position="ri"
                prop="subjectID"
              >
                <!-- v-model与 :value绑定的是同一个数据 -->
                <el-select
                  v-model="formData.subjectID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in subjectsList"
                    :key="index"
                    :label="item.subjectName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 二级目录 -->
            <el-col :span="6">
              <el-form-item
                label="二级目录"
                prop="directorysID"
              >
                <el-select
                  v-model="formData.directorysID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in directorysList"
                    :key="index"
                    :label="item.directoryName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 标签 -->
            <el-col :span="6">
              <el-form-item
                label="标签"
                prop="tagID"
              >
                <el-select
                  v-model="formData.tagID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in tagsList"
                    :key="index"
                    :label="item.tagName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 关键字 -->
            <el-col :span="6">
              <el-form-item
                label="关键字"
                prop="keyword"
              >
                <el-input v-model="formData.keyword"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 第二行 -->
          <el-row>
            <!-- 试题类型 -->
            <el-col :span="6">
              <el-form-item
                label="试题类型"
                prop="questionID"
              >
                <el-select
                  v-model="formData.questionID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in questionList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 难度 -->
            <el-col :span="6">
              <el-form-item
                label="难度"
                prop="difficultyID"
              >
                <el-select
                  v-model="formData.difficultyID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in difficultyList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 方向 -->
            <el-col :span="6">
              <el-form-item
                label="方向"
                prop="directionID"
              >
                <el-select
                  v-model="formData.directionID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in directionList"
                    :key="index"
                    :label="item.label"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 录入人 -->
            <el-col :span="6">
              <el-form-item
                label="录入人"
                prop="usersID"
              >
                <el-select
                  v-model="formData.usersID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in usersList"
                    :key="index"
                    :label="item.username"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 第三行 -->
          <el-row>
            <!-- 题目备注 -->
            <el-col :span="6">
              <el-form-item
                label="题目备注"
                prop="remark"
              >
                <el-input v-model="formData.remark"></el-input>
              </el-form-item>
            </el-col>
            <!-- 企业简称 -->
            <el-col :span="6">
              <el-form-item
                label="企业简称"
                prop="company"
              >
                <el-input v-model="formData.company"></el-input>
              </el-form-item>
            </el-col>
            <!-- 城市 -->
            <el-col :span="6">
              <el-row>
                <el-form-item
                  label="城市"
                  prop="provincesID"
                >
                  <el-select
                    class="citys citys-provinces"
                    v-model="formData.provincesID"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in provinceslist"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    class="citys"
                    v-model="formData.citysID"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in citysList"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-row>
            </el-col>
            <!-- 按钮区域 -->
            <el-col :span="6">
              <div class="btn">
                <el-button
                  size="mini"
                  @click="clearFrom"
                >清除</el-button>
                <el-button
                  type="primary"
                  size="mini"
                  @click="getList()"
                >搜索</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>

        <!-- 消息提示区域 -->
        <!-- 如果不等于空就渲染 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          show-icon
        >
        </el-alert>

        <!-- 中部tab栏导航栏区域 -->
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="tabsClick"
        >
          <el-tab-pane
            label="全部"
            name="1"
          >
            <!-- 数据表格 -->
            <el-table
              :data="tableList"
              style="width: 100%"
              fixed
            >
              <el-table-column
                prop="number"
                label="试题编号"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="subject"
                label="学科"
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="catalog"
                label="目录"
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="questionType"
                label="题型"
                width="100"
              >
                <!-- 作用域插槽 判断题型 -->
                <template slot-scope="scope">
                  <span v-if="scope.row.questionType === '1'">单选</span>
                  <span v-else-if="scope.row.questionType === '2'">多选</span>
                  <span v-else>简答</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="question"
                label="题干"
                width="180"
              >
                <template slot-scope="scope">
                  <div v-html="scope.row.question"></div>
                </template>
              </el-table-column>
              <el-table-column
                label="录入时间"
                width="180"
              >
                <template slot-scope="scope">
                  {{ scope.row.addDate | parseTimeByString("{y}-{m}-{d}") }}
                </template>
              </el-table-column>
              <el-table-column
                prop="difficulty"
                label="难度"
                width="100"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.difficulty === '1'">简单</span>
                  <span v-else-if="scope.row.difficulty === '2'">一般</span>
                  <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="creator"
                label="录入人"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="chkState"
                label="审核状态"
                width="100"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.chkState === 0">待审核</span>
                  <span v-else-if="scope.row.chkState === 1">已通过</span>
                  <span v-else>已拒绝</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="chkRemarks"
                label="审核意见"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="chkUser"
                label="审核人"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="publishState"
                label="发布状态"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.publishState === 0">下架</span>
                  <span v-else>上架</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="300"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="preview(scope.row)"
                  >预览</el-button>
                  <el-button
                    type="text"
                    :disabled="scope.row.chkState === 0 ? false : true"
                    @click="check(scope.row)"
                  >审核</el-button>
                  <el-button
                    type="text"
                    @click="$router.push(`/questions/new?${scope.row.id}`)"
                  >修改</el-button>

                  <el-button
                    type="text"
                    v-if="scope.row.publishState === 0"
                    @click="undercarriage(scope.row)"
                  >上架</el-button>

                  <el-button
                    type="text"
                    v-else
                    @click="grounding(scope.row)"
                  >下架</el-button>

                  <el-button
                    type="text"
                    :disabled="scope.row.publishState === 1 ? true : false"
                    @click="deleteList(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane
            label="待审核"
            name="2"
          >
            <!-- 数据表格 -->
            <el-table
              :data="staytableList"
              style="width: 100%"
              fixed
            >
              <el-table-column
                prop="number"
                label="试题编号"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="subject"
                label="学科"
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="catalog"
                label="目录"
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="questionType"
                label="题型"
                width="100"
              >
                <!-- 作用域插槽 判断题型 -->
                <template slot-scope="scope">
                  <span v-if="scope.row.questionType === '1'">单选</span>
                  <span v-else-if="scope.row.questionType === '2'">多选</span>
                  <span v-else>简答</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="question"
                label="题干"
                width="180"
              >
                <template slot-scope="scope">
                  <div v-html="scope.row.question"></div>
                </template>
              </el-table-column>
              <el-table-column
                label="录入时间"
                width="180"
              >
                <template slot-scope="scope">
                  {{ scope.row.addDate | parseTimeByString("{y}-{m}-{d}") }}
                </template>
              </el-table-column>
              <el-table-column
                prop="difficulty"
                label="难度"
                width="100"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.difficulty === '1'">简单</span>
                  <span v-else-if="scope.row.difficulty === '2'">一般</span>
                  <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="creator"
                label="录入人"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="chkState"
                label="审核状态"
                width="100"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.chkState === 0">待审核</span>
                  <span v-else-if="scope.row.chkState === 1">已通过</span>
                  <span v-else>已拒绝</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="chkRemarks"
                label="审核意见"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="chkUser"
                label="审核人"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="publishState"
                label="发布状态"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.publishState === 0">下架</span>
                  <span v-else>上架</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="300"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="preview(scope.row)"
                  >预览</el-button>
                  <el-button
                    type="text"
                    :disabled="scope.row.chkState === 0 ? false : true"
                    @click="check(scope.row)"
                  >审核</el-button>
                  <el-button
                    type="text"
                    @click="$router.push(`/questions/new?${scope.row.id}`)"
                  >修改</el-button>
                  <el-button
                    type="text"
                    v-if="scope.row.publishState === 0"
                    @click="undercarriage(scope.row)"
                  >上架</el-button>
                  <el-button
                    type="text"
                    v-else
                    @click="grounding(scope.row)"
                  >下架</el-button>
                  <el-button
                    type="text"
                    :disabled="scope.row.publishState === 1 ? true : false"
                    @click="deleteList(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane
            label="已审核"
            name="3"
          >
            <!-- 数据表格 -->
            <el-table
              :data="alreadytableList"
              style="width: 100%"
              fixed
            >
              <el-table-column
                prop="number"
                label="试题编号"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="subject"
                label="学科"
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="catalog"
                label="目录"
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="questionType"
                label="题型"
                width="100"
              >
                <!-- 作用域插槽 判断题型 -->
                <template slot-scope="scope">
                  <span v-if="scope.row.questionType === '1'">单选</span>
                  <span v-else-if="scope.row.questionType === '2'">多选</span>
                  <span v-else>简答</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="question"
                label="题干"
                width="180"
              >
                <template slot-scope="scope">
                  <div v-html="scope.row.question"></div>
                </template>
              </el-table-column>
              <el-table-column
                label="录入时间"
                width="180"
              >
                <template slot-scope="scope">
                  {{ scope.row.addDate | parseTimeByString("{y}-{m}-{d}") }}
                </template>
              </el-table-column>
              <el-table-column
                prop="difficulty"
                label="难度"
                width="100"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.difficulty === '1'">简单</span>
                  <span v-else-if="scope.row.difficulty === '2'">一般</span>
                  <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="creator"
                label="录入人"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="chkState"
                label="审核状态"
                width="100"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.chkState === 0">待审核</span>
                  <span v-else-if="scope.row.chkState === 1">已通过</span>
                  <span v-else>已拒绝</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="chkRemarks"
                label="审核意见"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="chkUser"
                label="审核人"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="publishState"
                label="发布状态"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.publishState === 0">下架</span>
                  <span v-else>上架</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="300"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="preview(scope.row)"
                  >预览</el-button>
                  <el-button
                    type="text"
                    :disabled="scope.row.chkState === 0 ? false : true"
                    @click="check(scope.row)"
                  >审核</el-button>
                  <el-button
                    type="text"
                    @click="$router.push(`/questions/new?${scope.row.id}`)"
                  >修改</el-button>
                  <el-button
                    type="text"
                    v-if="scope.row.publishState === 0"
                    @click="undercarriage(scope.row)"
                  >上架</el-button>
                  <el-button
                    type="text"
                    v-else
                    @click="grounding(scope.row)"
                  >下架</el-button>
                  <el-button
                    type="text"
                    :disabled="scope.row.publishState === 1 ? true : false"
                    @click="deleteList(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane
            label="已拒绝"
            name="4"
          >
            <!-- 数据表格 -->
            <el-table
              :data="passtableList"
              style="width: 100%"
              fixed
            >
              <el-table-column
                prop="number"
                label="试题编号"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="subject"
                label="学科"
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="catalog"
                label="目录"
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="questionType"
                label="题型"
                width="100"
              >
                <!-- 作用域插槽 判断题型 -->
                <template slot-scope="scope">
                  <span v-if="scope.row.questionType === '1'">单选</span>
                  <span v-else-if="scope.row.questionType === '2'">多选</span>
                  <span v-else>简答</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="question"
                label="题干"
                width="180"
              >
                <template slot-scope="scope">
                  <div v-html="scope.row.question"></div>
                </template>
              </el-table-column>
              <el-table-column
                label="录入时间"
                width="180"
              >
                <template slot-scope="scope">
                  {{ scope.row.addDate | parseTimeByString("{y}-{m}-{d}") }}
                </template>
              </el-table-column>
              <el-table-column
                prop="difficulty"
                label="难度"
                width="100"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.difficulty === '1'">简单</span>
                  <span v-else-if="scope.row.difficulty === '2'">一般</span>
                  <span v-else>困难</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="creator"
                label="录入人"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="chkState"
                label="审核状态"
                width="100"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.chkState === 0">待审核</span>
                  <span v-else-if="scope.row.chkState === 1">已通过</span>
                  <span v-else>已拒绝</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="chkRemarks"
                label="审核意见"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="chkUser"
                label="审核人"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="publishState"
                label="发布状态"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.publishState === 0">下架</span>
                  <span v-else>上架</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="300"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="preview(scope.row)"
                  >预览</el-button>
                  <el-button
                    type="text"
                    :disabled="scope.row.chkState === 0 ? false : true"
                    @click="check(scope.row)"
                  >审核</el-button>
                  <el-button
                    type="text"
                    @click="$router.push(`/questions/new?${scope.row.id}`)"
                  >修改</el-button>
                  <el-button
                    type="text"
                    v-if="scope.row.publishState === 0"
                    @click="undercarriage(scope.row)"
                  >上架</el-button>
                  <el-button
                    type="text"
                    v-else
                    @click="grounding(scope.row)"
                  >下架</el-button>
                  <el-button
                    type="text"
                    :disabled="scope.row.publishState === 1 ? true : false"
                    @click="deleteList(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>

        <!-- 分页 -->
        <!-- @size-change="handleSizeChange" 监听一页多少条  @current-change="handleCurrentChange" 监听页数-->
        <div class="pagination">
          <el-pagination
            :page-sizes="[2, 4, 6, 8]"
            :page-size="queryInfo.pagesize"
            layout=" prev, pager, next,  sizes,jumper"
            :total="total"
            :background="true"
            :current-page="queryInfo.page"
            @current-change="numChange"
            @size-change="sizeChange"
          >
          </el-pagination>
        </div>
        <!-- end -->
      </el-card>

      <!-- 预览对话框 -->
      <el-dialog
        title="题目预览"
        :visible.sync="previewDialogVisible"
        width="60%"
        :before-close="handleClose"
      >
        <!-- 弹框内部结构 -->
        <preview :dialogList="dialogList"></preview>

        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="previewDialogVisible = false"
          >关闭</el-button>
        </span>
      </el-dialog>

      <!-- 审核对话框 -->
      <el-dialog
        title="题目审核"
        :visible.sync="checkDialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-radio
          v-model="checkRadio"
          label="1"
        >通过</el-radio>
        <el-radio
          v-model="checkRadio"
          label="2"
        >拒绝</el-radio>

        <el-form
          class="checkDesc"
          ref="checkRef"
        >
          <el-form-item prop="checkprop">
            <el-input
              type="textarea"
              placeholder="请输入审核意见"
              v-model="checkDesc"
            ></el-input>
          </el-form-item>
        </el-form>

        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="checkDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="suerCheck"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { choice, choicePublish, choiceCheck, remove } from '@/api/hmmm/questions.js'
import { list as subjectsLists } from '@/api/hmmm/subjects.js'
import { list as directorysLists } from '@/api/hmmm/directorys.js'
import { list as tagsLists } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { list as usersLists } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'

import preview from '@/module-hmmm/pages/preview/preview.vue'

export default {
  name: 'questions-choice',
  components: {
    preview
  },
  data() {
    return {
      total: null, // 总共多少条数据
      alertText: '', // 提示信息条数.
      queryInfo: {
        page: 1, // 当前第几页
        pagesize: 4 // 每页显示多少条数据
      },
      tableList: [], // 表格数据
      // 表单数据
      formData: {
        subjectID: null,
        directorysID: null,
        tagID: null,
        questionID: null,
        difficultyID: null,
        directionID: null,
        usersID: null,
        keyword: null, // 关键字
        remark: null, // 题目备注
        company: null, // 企业
        provincesID: null,
        citysID: null
        // chkState: null// 审核状态
      },
      subjectsList: {}, // 学科数据
      directorysList: [], // 目录数据
      tagsList: [], // 标签数据
      questionList: questionType, // 试题类型数据
      difficultyList: difficulty, // 难度数据
      directionList: direction, // 方向数据
      usersList: [], // 用戶数据(录入人数据)
      provinceslist: [], // 省级城市数据
      citysList: [], // 城市数据
      // chkTypeList: chkType// 审核状态
      previewDialogVisible: false, // 预览弹框
      activeName: '1', // tab栏切换值
      staytableList: [], // 待审核数据
      alreadytableList: [], // 已审核
      passtableList: [], // 已通过
      dialogList: null, // 预览弹框数据
      checkDialogVisible: false, // 审核弹框
      checkRadio: null, // 审核单选框
      checkDesc: '', // 审核输入框
      checkcId: 0,
      checkRemarks: null,
      chkState: 0
    }
  },
  created() {
    this.getList()
    this.getSubjectsList()
    this.getUsersList()
    this.getProvinceslist()
  },
  methods: {
    // 获取表格数据
    async getList() {
      const { data } = await choice({
        ...this.queryInfo,
        subjectID: this.formData.subjectID,
        difficulty: this.formData.difficultyID,
        questionType: this.formData.questionID,
        tags: this.formData.tagID,
        province: this.formData.provincesID,
        city: this.formData.citysID,
        keyword: this.formData.keyword,
        remarks: this.formData.remark,
        shortName: this.formData.company,
        direction: this.formData.directionID,
        creatorID: this.formData.usersID,
        catalogID: this.formData.directorysID
        // chkState: this.formData.subjectID
      })
      console.log(data)
      this.tableList = data.items
      this.total = data.counts
      this.alertText = `共 ${this.total} 条记录`
    },

    // 监听页数发生变化
    numChange(page) {
      this.queryInfo.page = page
      this.getList()
    },

    // 监听一页的条数发生变化
    sizeChange(pagesize) {
      this.queryInfo.pagesize = pagesize
      this.getList()
    },

    // 获取学科数据
    async getSubjectsList() {
      const { data } = await subjectsLists({
        pagesize: 20
      })
      console.log(data)

      this.subjectsList = data.items
    },

    // 获取录入人数据
    async getUsersList() {
      const { data: usersData } = await usersLists({
        ...this.queryInfo,
        keyword: this.formData.keyword
      })
      console.log(usersData)
      this.usersList = usersData.list
    },

    // 获取省级城市
    getProvinceslist() {
      const data = provinces() // 因为省级城市只是普通的函数 不需要用  async  和await
      this.provinceslist = data
    },

    // 监听清除事件
    clearFrom() {
      this.$refs.fromRef.resetFields()
    },

    // 预览弹出层关闭事件
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => { })
    },

    // 监听待审核事件
    tabsClick(tab) {
      if (tab.index === '1') {
        const staytableList = this.tableList.filter((item) => {
          return item.chkState === 0
        })
        this.staytableList = staytableList
      }
      if (tab.index === '2') {
        const alreadytableList = this.tableList.filter((item) => {
          return item.chkState === 1
        })
        this.alreadytableList = alreadytableList
      }
      if (tab.index === '3') {
        const passtableList = this.tableList.filter((item) => {
          return item.chkState === 2
        })
        this.passtableList = passtableList
      }
    },

    // 监听预览事件
    preview(row) {
      this.previewDialogVisible = true
      this.dialogList = row
      console.log(row)
    },

    // 监听点击审核按钮
    check(row) {
      this.checkDialogVisible = true
      // console.log(row)
      this.checkcId = row.id
    },

    // 监听确认审核事件
    async suerCheck() {
      // console.log(5)
      if (this.checkDesc.trim().length === 0) {
        this.$message({
          message: '请输入审核意见',
          type: 'warning'
        })
      } else {
        // console.log(this.checkRadio)
        if (this.checkRadio === 1) {
          this.chkState = 1
        } else {
          this.chkState = 2
        }
        const { data } = await choiceCheck({
          id: this.checkcId,
          chkState: this.chkState,
          chkRemarks: this.checkDesc
        })
        this.$message.success('操作成功')
        console.log(data)
        // console.log(this.checkcId, this.chkState, this.checkDesc)
        this.getList()
      }
    },

    // 监听下架事件
    grounding(row) {
      // console.log('下架')
      // console.log(row)
      this.$confirm('你确认下架这道题目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async (action) => {
          // 接收正确
          await choicePublish({ id: row.id, publishState: 0 })
          this.getList()
        })
        .catch(() => {
          // 接收 错误
        })
    },

    // 监听上架事件
    undercarriage(row) {
      // console.log('上架')
      this.$confirm('你确认上架这道题目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async (action) => {
          // 接收正确
          await choicePublish({ id: row.id, publishState: 1 })
          this.getList()
        })
        .catch(() => {
          // 接收 错误
        })
    },

    // 监听删除事件
    deleteList(row) {
      this.$confirm('此操作将永久删除该题目，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => { // 接收正确
        await remove({ id: row.id })
        this.$message.success('删除成功')
        this.getList()
      }).catch(() => { // 接收 错误

      })
    }
  },
  watch: {
    // 监听学科  下拉菜单里面选中的是当前的内容的id号（不是索引号）   <!-- v-model与 :value绑定的是同一个数据 -->
    'formData.subjectID': async function () {
      this.formData.directorysID = ''
      this.formData.tagID = ''
      // console.log(this.subjectID)
      // 获取二级目录数据
      const { data } = await directorysLists({
        subjectID: this.formData.subjectID
      }) // 调用目录函数 把学科id传过去
      // console.log(data)
      this.directorysList = data.items

      // 获取标签数据
      const { data: tagData } = await tagsLists({
        subjectID: this.formData.subjectID
      }) // 调用标签函数 把学科id传过去
      // console.log(data)
      // console.log('tagData.items', tagData.items)
      this.tagsList = tagData.items
    },

    // 监听市区城市
    'formData.provincesID': function () {
      // const str = this.provinceslist.filter((item, index) => index === this.provincesID)
      // console.log(str)
      this.formData.citysID = ''
      // 获取县区城市数据
      const data = citys(this.formData.provincesID) // 调用获取县级城市的函数 并把选择的市级城市传过去
      console.log(data)
      this.citysList = data
    }
  }
}
</script>

<style lang="less" scoped>
.citys {
  width: 110px;
}
.citys-provinces {
  margin-right: 8px;
}
* {
  box-sizing: border-box;
}

.addBtn {
  float: right !important;
  margin-bottom: 20px;
}
.el-input {
  width: 227px !important;
}
.btn {
  padding-left: 174px !important;
}

.one-form {
  width: 1506px;
}
.el-alert {
  margin-bottom: 10px;
}
</style>
